<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <link rel="stylesheet"  href="../css/bulk-delivery.css">


    <script src="../js/jquery-3.3.1.js"></script>
    <script src="../layer/layer.js"></script>
    <script type="text/javascript">
        $(document).ready(function(e) {
            $("#btn").click(function () {
                if(!$(".checkbox-agree").prop("checked")){
                    layer.msg("请先勾选协议");
                    return false;
                }

                let flag = 0;
                let phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;
                let sendPhone = $.trim($('#sendPhone').val());
                if (sendPhone=="") {
                    // layer.msg("请输入有效的手机号码");
                    $('#sendPhone').css({border:"solid 1px red"});
                    $('#send-phone-p').html("手机号不能为空");
                    flag = 1;
                }else{
                    if (!phoneReg.test(sendPhone)) {
                        $('#sendArea').css({border:"solid 1px blue"});
                        $('#send-phone-p').html("");
                        $('#sendPhone').css({border:"solid 1px red"});
                        $('#send-phone-p').html("请输入正确的手机号");
                        flag = 1;
                    }else{
                        $('#sendArea').css({border:"solid 1px #67C23A"});
                        $('#send-phone-p').html("");
                    }
                }
                let sendName = $.trim($('#sendName').val());
                if (sendName=="") {
                    $('#sendArea').css({border:"solid 1px red"});
                    $('#send-name-p').html("寄件人姓名不能为空");
                    flag = 1;

                }else{
                    $('#sendArea').css({border:"solid 1px #67C23A"});
                    $('#send-name-p').html("");


                }
                let sendArea = $.trim($('#sendArea').val());
                if (sendArea=="") {
                    $('#sendArea').css({border:"solid 1px red"});
                    $('#send-area-p').html("请输入所属区域");
                    flag = 1;

                }else{
                    $('#sendArea').css({border:"solid 1px #67C23A"});
                    $('#send-area-p').html("");


                }
                let sendAddress = $.trim($('#sendAddress').val());
                if (sendAddress=="") {
                    $('#sendAddress').css({border:"solid 1px red"});
                    $('#send-address-p').html("请输入详细地址");
                    flag = 1;

                }else{
                    $('#sendAddress').css({border:"solid 1px #67C23A"});
                    $('#send-address-p').html("");


                }

                if(flag == 1){
                    return false;
                }else{
                    return true;
                }
            });
            function upload(){
                let formData = new FormData();
                let sendName = $("#sendName").val();
                let sendPhone = $("#sendPhone").val();
                let sendAddress = $("#sendAddress").val();
                let sendArea = $("#sendArea").val();
                formData.append("file", $('[type="file"]')[0].files[0]);
                formData.append("sendName", sendName);
                formData.append("sendPhone", sendPhone);
                formData.append("sendAddress", sendAddress);
                formData.append("sendArea", sendArea);

                $.ajax({
                    url:"http://localhost:8085/sdkd/user/batchAddUserPage.do",
                    type : 'post',
                    data : formData,
                    cache: false,   //上传文件无需缓存
                    processData: false,   // 用于对参数进行序列化处理，这里必须设为false
                    contentType:false,
                    dataType:"json",
                    async:false,
                    success:function (data) {
                        console.log(data);

                    }
                })
            }
        });


        // $("#btn").click(function () {
        //     alert("1")
        //     let formData = new FormData();
        //         let sendName = $("#sendName").val();
        //         let sendPhone = $("#sendPhone").val();
        //         let sendAddress = $("#sendAddress").val();
        //         let sendArea = $("#sendArea").val();
        //         formData.append("file", $('[type="file"]')[0].files[0]);
        //         formData.append("sendName", sendName);
        //         formData.append("sendName", sendPhone);
        //         formData.append("sendName", sendAddress);
        //         formData.append("sendName", sendArea);
        //         $.ajax({
        //             type: "post",
        //             data:formData,
        //             dataType:"json",//返回值类型，建议不要默认自行定义
        //             //dataType: "binary",
        //             async: false,
        //             timeout: 30000,
        //             url:"http://localhost:8085/sdkd/user/batchAddUserPage.do",
        //         success: function(result){//result为接收返回值的参数名，可自行修改
        //             var s = result.data;
        //             alert(s);
        //         },
        //         error: function(x, e) {
        //         // alert(x.readyState);
        //            alert("1");
        //         }
        //     });
        //
        // })
        // $('#btn').click(function(){
        //     let formData = new FormData();
        //     let sendName = $("#sendName").val();
        //     let sendPhone = $("#sendPhone").val();
        //     let sendAddress = $("#sendAddress").val();
        //     let sendArea = $("#sendArea").val();
        //     formData.append("file", $('[type="file"]')[0].files[0]);
        //     formData.append("sendName", sendName);
        //     formData.append("sendName", sendPhone);
        //     formData.append("sendName", sendAddress);
        //     formData.append("sendName", sendArea);
        //     $.ajax({
        //         type: "post",
        //         data:formData,
        //         dataType:"json",//返回值类型，建议不要默认自行定义
        //         //dataType: "binary",
        //         async: false,
        //         timeout: 30000,
        //         url:"http://localhost:8085/sdkd/user/batchAddUserPage.do",
        //     success: function(result){//result为接收返回值的参数名，可自行修改
        //         var s = result.data;
        //         alert(s);
        //     },
        //     error: function(x, e) {
        //     // alert(x.readyState);
        //        alert("1");
        //     }
        //     });
        //   });





    $(document).ready(function(){
            $('#my-img').click(function(){
                $('#img-upload').click();
               
            });
           

        });
        $(document).ready(function(e) {
            $("#img-upload").change(function(e) {
                
                let formData = new FormData();
                formData.append("file", $('[type="file"]')[0].files[0]);
                formData.append("sendName", "111");

                $.ajax({
                    url:"http://localhost:8085/sdkd/user/batchAddUserPageAJAX.do",
                    type : 'post',
                    data : formData,
                    cache: false,   //上传文件无需缓存
                    processData: false,   // 用于对参数进行序列化处理，这里必须设为false
                    contentType:false,
                    dataType:"json",
                    success:function (data) {
                        console.log(data);
                        if(data.code == 1) {
                            $(".middle-addressee").height(400);
                            let html = '';

                            let htmlPage =''
                            let list = data.data

                            $("#page").html(htmlPage)
                            for(let i = 0; i< list.length;i++){
                                html += `
                    <tr>
                    <td>&emsp;&emsp;&emsp;&emsp;${list[i].receiveName}</td>
                    <td>&emsp;&emsp;&emsp;&emsp;${list[i].receivePhone}</td>
                    <td>&emsp;&emsp;&emsp;&emsp;${list[i].receiveAddress}</td>
                    <td>&emsp;&emsp;&emsp;&emsp;赵光镇祥景小区</td>
                    <td>&emsp;&emsp;&emsp;&emsp;${list[i].pageType}</td>

                    <td>&emsp;&emsp;${list[i].weight}</td>

                    </tr>`
                            }
                            html += `</table>`
                            $("#table").append(html)


                        } else if(data.code == 0){

                        }
                    }
                })
            });
        });
    </script>
</head>
<body>
    <div class="head">
        <div class="container">
            <div class="option-first">
                <img src="../img/sdkd_log.png">
            </div>
            <div class="option">
                <a href="HomePage.html">首页</a>
            </div>
            <div class="option">
                <a href="booking_delivery.html">预约寄件</a>
            </div>
            <div class="option">
                <a href="#" style="color: #6EC4FB;">批量寄件</a>
            </div>
            <div class="option" style="background-color: white;">
                <a href="service.html">查询服务</a>
            </div>
            <div class="option">
                <a href="/sdkd/personalcenter/html/MyShunda.html">个人中心</a>
            </div>
            <div class="option-last">
                <iframe scrolling="no" class="login-context" src="" frameborder="0" ></iframe>
            </div>
        </div>
    </div>
    <div class="middle-body">
        <div class="middle-head">
            <div class="middle-left">
                <div class="img">
                    <img style="width: 100%;height: 100%;" src="../img/send.svg">
                </div>
                <p class="title">
                    &nbsp;预约寄件
                </p>
                <p class="text">
                    （17点前下单，业务员当天收件，17点后下单次日收件）
                </p>
            </div>
            <div class="middle-right">
                <p class="text">
                    &thinsp; 
                </p>
                <div class="button">
                    <p class="href">预约寄件</p>
                </div>
                <p class="text">单独寄件，可以使用&thinsp;  </p>
            </div>
            
        </div>
        <div class="level">
            <hr style="height: 1px;background-color: #CCCCCC;border: none;">   
        </div>
        <form method="post" id="form"  enctype="multipart/form-data" action="../batchAddUserPage.do">
        <div class="middle-sender">
            <div class="sender-form">
                <div class="label">
                    <div class="square">寄</div>
                    <div class="triangle"></div>
                </div>
                <div class="send-main">
                    <div class="input-text">
                        <span>&emsp;&emsp;<span style="color: red;">*</span>姓名：&emsp;</span><input id="sendName" name="sendName" type="text" class="input">
                        <div class="button">
                            <p class="href">地址薄</p>
                        </div>
                    </div>
                    <div  class="interval">
                        <p send-name-p></p>
                    </div>
                    <div class="input-text">
                        <span>&emsp;&emsp;<span style="color: red;">*</span>电话：&emsp;</span><input id="sendPhone" name="sendPhone" type="text" class="input">
                    </div>
                    <div class="interval">
                        <p send-phone-p></p>
                    </div>
                    <div class="input-text">
                        <span><span style="color: red;">*</span>所属区域：&emsp;</span><input id="sendArea" name="sendArea" type="text" class="input">
                    </div>
                    <div class="interval">
                        <p send-area-p></p>
                    </div>
                    <div class="input-text">
                    <span><span style="color: red;">*</span>详细地址：&emsp;</span><input id="sendAddress" name="sendAddress" type="text" class="input">

                    </div>
                    <div class="interval">
                        <p send-address-p></p>
                    </div>
                    <div class="checkbox">
                        <input name='subject' type="checkbox" value="Chinese" /><label> 保存到常用地址薄</label>
                        <a href="#">智能解析地址</a>
                    </div>     
                </div>
                
            </div>
            <div class="sender-login">
                <div class="member">
                    <ul>
                        <li class="title">会员登录下单好处多</li>
                        <li>
                            <div class="img">
                                <img src="../img/location.svg">
                            </div>
                            &thinsp; 登陆后可使用地址簿，寄件更便捷！
                        </li>
                        <li>
                            <div class="img">
                                <img src="../img/note.svg">
                            </div>
                            &thinsp; 快件路由订阅、快件信息管理、批量下单
                        </li>
                        <li>
                            <div class="img">
                                <img src="../img/cup.svg">
                            </div>
                            &thinsp; 更多特权逐渐开放中
                        </li>
                        <li>
                            <button>立即登录</button>&nbsp;或&nbsp;<a href="#">注册成为瞬达会员</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="middle-addressee">
            <div class="label">
                <div class="square">收</div>
                <div class="triangle"></div>
            </div>
            <div class="option"></div>
            <div class="option">


                <div class="head-img" style="width: 100px;height: 30px;">
                    <div class="file-up" id="my-img">选择文件</div>
                  
                    <input style="display: none;"  type="file" id="img-upload"/>
                </div>


                <a href="#" class="upload">
                    <div class="question">
                        <img src="../img/help.svg" alt="">
                    </div>    
                    &nbsp;&nbsp;上传帮助
                </a>
               <a href="sdkd.xlsx" style="margin-right: 7px;">下载模板</a>
            </div>
            <div class="option"></div>
            <div class="title">已成功上传的收件人列表：</div>
            <div class="table" overflow：auto;>
                <table id="table" style="width: 1100px;color: #909399;font-size:14px">
                    <tr>
                        <th>&emsp;&emsp;收件人姓名</th>
                        <th>收件人手机</th>
                        <th>省 市 区(县</th>
                        <th>详细地址</th>
                        <th>物品名称(限16字)</th>
                        <th>重量(默认1KG)</th>
                    </tr>
                    <!-- <tr>
                        <td>&emsp;&emsp;&emsp;&emsp;${list[i].receiveName}</td>
                        <td>&emsp;&emsp;&emsp;&emsp;${list[i].receivePhone}</td>
                        <td>&emsp;&emsp;&emsp;&emsp;${list[i].receiveAddress}</td>
                        <td>&emsp;&emsp;&emsp;&emsp;赵光镇祥景小区</td>
                        <td>&emsp;&emsp;&emsp;&emsp;${list[i].pageType}</td>
    
                        <td>&emsp;&emsp;${list[i].weight}</td>
    
                    </tr>
                    <tr>
                        <td>&emsp;&emsp;&emsp;&emsp;${list[i].receiveName}</td>
                        <td>&emsp;&emsp;&emsp;&emsp;${list[i].receivePhone}</td>
                        <td>&emsp;&emsp;&emsp;&emsp;${list[i].receiveAddress}</td>
                        <td>&emsp;&emsp;&emsp;&emsp;赵光镇祥景小区</td>
                        <td>&emsp;&emsp;&emsp;&emsp;${list[i].pageType}</td>
    
                        <td>&emsp;&emsp;${list[i].weight}</td>
    
                    </tr>
                    <tr>
                        <td>&emsp;&emsp;&emsp;&emsp;${list[i].receiveName}</td>
                        <td>&emsp;&emsp;&emsp;&emsp;${list[i].receivePhone}</td>
                        <td>&emsp;&emsp;&emsp;&emsp;${list[i].receiveAddress}</td>
                        <td>&emsp;&emsp;&emsp;&emsp;赵光镇祥景小区</td>
                        <td>&emsp;&emsp;&emsp;&emsp;${list[i].pageType}</td>
    
                        <td>&emsp;&emsp;${list[i].weight}</td>
    
                    </tr>
                    <tr>
                        <td>&emsp;&emsp;&emsp;&emsp;${list[i].receiveName}</td>
                        <td>&emsp;&emsp;&emsp;&emsp;${list[i].receivePhone}</td>
                        <td>&emsp;&emsp;&emsp;&emsp;${list[i].receiveAddress}</td>
                        <td>&emsp;&emsp;&emsp;&emsp;赵光镇祥景小区</td>
                        <td>&emsp;&emsp;&emsp;&emsp;${list[i].pageType}</td>
    
                        <td>&emsp;&emsp;${list[i].weight}</td>
    
                    </tr>
                    <tr>
                        <td>&emsp;&emsp;&emsp;&emsp;${list[i].receiveName}</td>
                        <td>&emsp;&emsp;&emsp;&emsp;${list[i].receivePhone}</td>
                        <td>&emsp;&emsp;&emsp;&emsp;${list[i].receiveAddress}</td>
                        <td>&emsp;&emsp;&emsp;&emsp;赵光镇祥景小区</td>
                        <td>&emsp;&emsp;&emsp;&emsp;${list[i].pageType}</td>
    
                        <td>&emsp;&emsp;${list[i].weight}</td>
    
                    </tr>
                    <tr>
                        <td>&emsp;&emsp;&emsp;&emsp;${list[i].receiveName}</td>
                        <td>&emsp;&emsp;&emsp;&emsp;${list[i].receivePhone}</td>
                        <td>&emsp;&emsp;&emsp;&emsp;${list[i].receiveAddress}</td>
                        <td>&emsp;&emsp;&emsp;&emsp;赵光镇祥景小区</td>
                        <td>&emsp;&emsp;&emsp;&emsp;${list[i].pageType}</td>
    
                        <td>&emsp;&emsp;${list[i].weight}</td>
    
                    </tr>
                    <tr>
                        <td>&emsp;&emsp;&emsp;&emsp;${list[i].receiveName}</td>
                        <td>&emsp;&emsp;&emsp;&emsp;${list[i].receivePhone}</td>
                        <td>&emsp;&emsp;&emsp;&emsp;${list[i].receiveAddress}</td>
                        <td>&emsp;&emsp;&emsp;&emsp;赵光镇祥景小区</td>
                        <td>&emsp;&emsp;&emsp;&emsp;${list[i].pageType}</td>
    
                        <td>&emsp;&emsp;${list[i].weight}</td>
    
                    </tr>
                    <tr>
                        <td>&emsp;&emsp;&emsp;&emsp;${list[i].receiveName}</td>
                        <td>&emsp;&emsp;&emsp;&emsp;${list[i].receivePhone}</td>
                        <td>&emsp;&emsp;&emsp;&emsp;${list[i].receiveAddress}</td>
                        <td>&emsp;&emsp;&emsp;&emsp;赵光镇祥景小区</td>
                        <td>&emsp;&emsp;&emsp;&emsp;${list[i].pageType}</td>
    
                        <td>&emsp;&emsp;${list[i].weight}</td>
    
                    </tr>
                    <tr>
                        <td>&emsp;&emsp;&emsp;&emsp;${list[i].receiveName}</td>
                        <td>&emsp;&emsp;&emsp;&emsp;${list[i].receivePhone}</td>
                        <td>&emsp;&emsp;&emsp;&emsp;${list[i].receiveAddress}</td>
                        <td>&emsp;&emsp;&emsp;&emsp;赵光镇祥景小区</td>
                        <td>&emsp;&emsp;&emsp;&emsp;${list[i].pageType}</td>
    
                        <td>&emsp;&emsp;${list[i].weight}</td>
    
                    </tr> -->


                </table>
            </div>
            <div class="information" style="border: 0px;"></div>
            
        </div>
        
        <div class="middle-regulations">
            <div class="agreement">
                <div class="left">
                    <input class="checkbox-agree" type="checkbox">&nbsp;同意并接受
                </div>
                <div class="right">
                    <a href="#">"快递服务协议"</a> <a href="#">"隐私政策"</a>
                </div>
            </div>
            <button id="btn" type="button" class="button">
                立即下单
            </button>
        </div>
        </form>     
    </div>
    
    <div class="foot">
        <div class="top">
            <div class="top-body">
                <div class="middle">
                    <div class="href" style="margin-top: 30px;">
                        <div class="img">
                            <img src="../img/outlets.svg">
                        </div>
                        &emsp;网点查询
                    </div>
                    <div class="href">
                        <div class="img">
                            <img src="../img/service.svg">
                        </div>
                        &emsp;产品服务
                    </div>
                </div>
                <div class="middle">
                    <div class="href" style="margin-top: 30px;">
                        <div class="img">
                            <img src="../img/prescription.svg">
                        </div>
                        &emsp;运费时效
                    </div>
                    <div class="href">
                        <div class="img">
                            <img src="../img/prohibit.svg">
                        </div>
                        &emsp;禁寄物品
                    </div>
                    <div class="in">

                    </div>
                </div>
                <div class="qr_code">
                    <div class="main">
                        <img src="../img/1.png" style="width: 100%;height: 100%;">
                    </div>
                    <div class="img">
                        <img src="../img/weixin.svg">
                    </div>
                    <div class="text">
                        &emsp;微信公众号
                    </div>
                </div>
                <div class="qr_code">
                    <div class="main">
                        <img src="../img/1.png" style="width: 100%;height: 100%;">
                    </div>
                    <div class="img">
                        <img src="../img/qq.svg">
                    </div>
                    <div class="text">
                        &emsp;QQ公众号
                    </div>
                </div>
                <div class="qr_code">
                    <div class="main">
                        <img src="../img/1.png" style="width: 100%;height: 100%;">
                    </div>
                    <div class="img">
                        <img src="../img/alipay.svg">
                    </div>
                    <div class="text">
                        &emsp;支付宝服务窗
                    </div>
                </div>
                <div class="qr_code">
                    <div class="main">
                        <img src="../img/1.png" style="width: 100%;height: 100%;">
                    </div>
                    <div class="img">
                        <img src="../img/app.svg">
                    </div>
                    <div class="text">
                        &emsp;瞬达APP
                    </div>
                </div>
                <div class="interval">

                </div>
                <div class="logo">
                    <img src="../img/2.png">
                </div>
            </div>
        </div>
        <div class="bottom">
            瞬达快递 版权所有 <a href="#">沪ICP备13044869号</a>
        </div>

    </div>

</body>
<script src="../js/jquery-3.3.1.js"></script>
<script>
    $.ajax({
        url: "/sdkd/userInfo/loginStatus.do",
        async: false,
        dataType: "json",
        type: "post",
        success: function (data) {
            console.log(data)
            if(1 == data.code){

            }else if(2 == data.code){

            }
        }
    }, "json")
</script>
</html>